import { Outlet, useNavigate, useLocation } from 'react-router-dom';
import { 
  Home, 
  Heart, 
  Bell, 
  User, 
  Sparkles,
  MapPin
} from 'lucide-react';
import { useAuthStore, useNotificationStore } from '../stores';

const Layout: React.FC = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const { user } = useAuthStore();
  const { unreadCount } = useNotificationStore();

  const navigationItems = [
    { path: '/home', icon: Home, label: '首页' },
    { path: '/matches', icon: Heart, label: '匹配' },
    { path: '/soul-matching', icon: Sparkles, label: '灵魂匹配' },
    { path: '/notifications', icon: Bell, label: '通知', badge: unreadCount },
    { path: '/profile', icon: User, label: '我的' },
  ];

  const isActive = (path: string) => location.pathname === path;

  return (
    <div className="min-h-screen bg-gray-50">
      {/* 主要内容区域 */}
      <main className="pb-20">
        <Outlet />
      </main>

      {/* 底部导航栏 */}
      <nav className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 px-4 py-2">
        <div className="flex justify-around items-center max-w-md mx-auto">
          {navigationItems.map((item) => {
            const Icon = item.icon;
            return (
              <button
                key={item.path}
                onClick={() => navigate(item.path)}
                className={`flex flex-col items-center py-2 px-3 rounded-lg transition-colors duration-200 ${
                  isActive(item.path)
                    ? 'text-primary-500 bg-primary-50'
                    : 'text-gray-600 hover:text-primary-500 hover:bg-gray-50'
                }`}
              >
                <div className="relative">
                  <Icon size={24} />
                  {item.badge && item.badge > 0 && (
                    <span className="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">
                      {item.badge > 99 ? '99+' : item.badge}
                    </span>
                  )}
                </div>
                <span className="text-xs mt-1 font-medium">{item.label}</span>
              </button>
            );
          })}
        </div>
      </nav>

      {/* 顶部状态栏 */}
      <div className="fixed top-0 left-0 right-0 bg-white border-b border-gray-200 px-4 py-3 z-10">
        <div className="flex items-center justify-between max-w-md mx-auto">
          <div className="flex items-center space-x-2">
            <div className="w-8 h-8 bg-gradient-to-br from-primary-500 to-secondary-500 rounded-full flex items-center justify-center">
              <span className="text-white text-sm font-bold">
                {user?.nickname?.charAt(0) || 'U'}
              </span>
            </div>
            <div>
              <h1 className="text-lg font-semibold text-gray-900">
                {user?.nickname || '用户'}
              </h1>
              <div className="flex items-center text-xs text-gray-500">
                <MapPin size={12} />
                <span className="ml-1">{user?.location || '未知位置'}</span>
              </div>
            </div>
          </div>
          
          <div className="flex items-center space-x-2">
            <div className="w-2 h-2 bg-green-500 rounded-full"></div>
            <span className="text-xs text-gray-500">在线</span>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Layout;
